import { useState, useEffect } from 'react'
import React from 'react'
import { Tabs } from 'antd-mobile'
import { getCoupon } from '../request/app'
// 引入优惠劵css
import  "../assets/css/coupon.css";
// // 头部上部分时间信号栏
import Top from "../components/top";
// 头部
import Head from '../components/header'
function Coupon() {
    let [user1, setUser1] = useState([])
     let [user2, setUser2] = useState([])
     let [user3, setUser3] = useState([])
     useEffect(() => {
     getCoupon().then((res) => {
    console.log([...res.list[0].content]);
     setUser1([...res.list[0].content])
    setUser2([...res.list[1].content])
    setUser3([...res.list[2].content])
     })
    }, [])
    return(
    <div className="Co_box">
        {/* 头部 */}
        <div className="Co_header">
            <Top/>
            <Head name={'优惠劵'}/>
        </div>
        {/* body */}
        <div className="Co_body">
            {/* 上部分身体 使用分类 */}
            
            <Tabs className='redss'>
          <Tabs.Tab title='未使用' key='fruits' >
            

            {
    user1.map(item => {
        return (
            <div className="centers" key={item.id}>
            <div className="one">
            <ul className="ul">
            <li>￥&nbsp;<span>{item.money}</span></li>
            <li>满{item.limit_money}可用</li>
                </ul>
            <ul className="uls">
            <li className="lis">{item.title}</li>
            <li className="liss">2021.05.31-2021.06.07</li>
             </ul>
                </div>
            <div className="two">
                <ul>
            <li>{item.description}</li>
                </ul>
                </div>
            </div>
 )})}




          </Tabs.Tab>
          <Tabs.Tab title='已使用' key='vegetables'>
            
          {
    user2.map(item => {
        return (
            <div className="centers" key={item.id}>
            <div className="one">
            <ul className="ul">
            <li>￥&nbsp;<span>{item.money}</span></li>
            <li>满{item.limit_money}可用</li>
                </ul>
            <ul className="uls">
            <li className="lis">{item.title}</li>
            <li className="liss">2021.05.31-2021.06.07</li>
             </ul>
                </div>
            <div className="two">
                <ul>
            <li>{item.description}</li>
                </ul>
                </div>
            </div>
 )})}

          </Tabs.Tab>
          <Tabs.Tab title='已失效' key='animals'>
            
          {
    user3.map(item => {
        return (
            <div className="centers" key={item.id}>
            <div className="one">
            <ul className="ul">
            <li>￥&nbsp;<span>{item.money}</span></li>
            <li>满{item.limit_money}可用</li>
                </ul>
            <ul className="uls">
            <li className="lis">{item.title}</li>
            <li className="liss">2021.05.31-2021.06.07</li>
             </ul>
                </div>
            <div className="two">
                <ul>
            <li>{item.description}</li>
                </ul>
                </div>
            </div>
 )})}


          </Tabs.Tab>
        </Tabs>
            
            {/* 中部分身体 优惠劵内容 */}
             <div className="centers">
                
                {/* <div className="one">
                    <ul className="ul">
                         <li>￥&nbsp;<span>3</span></li>
                        <li>满3可用</li>
                    </ul>
                    <ul className="uls">
                        <li className="lis">3元新人福利卷</li>
                         <li className="liss">2021.05.31-2021.06.07</li>
                    </ul>
                 </div>
                 

                 <div className="two">
                   <ul>
                      <li>使用规则：1.秒杀商品和万人团商品不可使用 2.进限…</li>
                        <li></li>
                    </ul>
                </div> */}
             </div>
            {/* 下部分身体 ?优惠劵规则 */}
            <div className="bottom">
                <ul>
                    <li></li>
                    <li>?优惠劵规则</li>
                </ul>
            </div>


            {/* 抢卷 */}
            <div className="juan">抢更多好卷</div>
        </div>
    </div>)
}
export default Coupon